<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- meta声明viewport为了处理移动端 -->
  <!-- width=device-width: 是自适应手机屏幕的尺寸宽度 -->
  <!-- inital-scale:是缩放的初始化 -->
  <!-- user-scalable:是用户的可以缩放的操作 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、是什么</h2>
  <div>响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整</div>
  <br>
  <div>响应式网站常见特点：</div>
  <ul>
    <li>同时适配PC + 平板 + 手机等</li>
    <li>标签导航在接近手持终端设备时改变为经典的抽屉式导航</li>
    <li>网站的布局会根据视口来调整模块的大小和位置</li>
  </ul>
  <h2>二、实现方式</h2>
  <div>响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport</div>
  <h4>媒体查询</h4>
  <style>
    /* 当视口在375px - 600px之间，设置特定字体大小18px */
    /* @media screen (min-width: 375px) and (max-width: 600px) {
      body {
        font-size: 18px;
      }
    } */
  </style>
  <h4>百分比</h4>
  <div>通过百分比单位 " % " 来实现响应式的效果</div>
  <br>
  <div>看到每个属性都使用百分比，会照成布局的复杂度，所以不建议使用百分比来实现响应式</div>
  <h4>vw/vh</h4>
  <div>vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一</div>
  <h4>rem</h4>
  <div>在以前也讲到，rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px</div>
</body>
</html>